<template>
  <div class="login-container">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>javascript接入</span>
        <el-button style="float: right; padding: 3px 0" type="text" @click="handleClipboard($event)">点击复制</el-button>
        <el-radio-group v-model="checked1" style="float: right;margin-right: 20px;margin-top:3px;">
          <el-radio :label="1">不屏蔽</el-radio>
          <el-radio :label="2">屏蔽华为</el-radio>
          <el-radio :label="3">屏蔽QQ浏览器</el-radio>
        </el-radio-group>
      </div>
      <pre v-if="checked1 == 2" class="text">
var UA = navigator.userAgent.toLocaleLowerCase();
if (!/huawei|honor/.test(UA)) {
    (function() {
        var hi = document.createElement("script");
        hi.src = "//{{ link }}";
        var k = document.getElementsByTagName("script")[0];
        k.parentNode.insertBefore(hi, k);
    })();
}
      </pre>
      <pre v-if="checked1 == 1" class="text">
(function() {
    var hi = document.createElement("script");
    hi.src = "//{{ link }}";
    var k = document.getElementsByTagName("script")[0];
    k.parentNode.insertBefore(hi, k);
})();
      </pre>
      <pre v-if="checked1 == 3" class="text">
var UA = navigator.userAgent.toLocaleLowerCase();
if (!/mqqbrowser/.test(UA)) {
    (function() {
        var hi = document.createElement("script");
        hi.src = "//{{ link }}";
        var k = document.getElementsByTagName("script")[0];
        k.parentNode.insertBefore(hi, k);
    })();
}
      </pre>
    </el-card>

    <textarea id="copy" style="display: none" />

    <el-card class="box-card" style="margin-top: 30px;">
      <div slot="header" class="clearfix">
        <span>html接入</span>
        <el-button style="float: right; padding: 3px 0" type="text" @click="handleClipboard1($event)">点击复制</el-button>
        <el-radio-group v-model="checked2" style="float: right;margin-right: 20px;margin-top:3px;">
          <el-radio :label="1">不屏蔽</el-radio>
          <el-radio :label="2">屏蔽华为</el-radio>
          <el-radio :label="3">屏蔽QQ浏览器</el-radio>
        </el-radio-group>
      </div>
      <pre v-if="checked2 == 2" class="text">
&lt;script type="text/javascript"&gt;
    var UA = navigator.userAgent.toLocaleLowerCase();
    if (!/huawei|honor/.test(UA)) {
        (function() {
            var hi = document.createElement("script");
            hi.src = "//{{ link }}";
            var k = document.getElementsByTagName("script")[0];
            k.parentNode.insertBefore(hi, k);
        })();
    }
&lt;/script&gt;
      </pre>
      <pre v-if="checked2 == 1" class="text">
&lt;script type="text/javascript"&gt;
    (function() {
        var hi = document.createElement("script");
        hi.src = "//{{ link }}";
        var k = document.getElementsByTagName("script")[0];
        k.parentNode.insertBefore(hi, k);
    })();
&lt;/script&gt;
      </pre>
      <pre v-if="checked2 == 3" class="text">
&lt;script type="text/javascript"&gt;
    var UA = navigator.userAgent.toLocaleLowerCase();
    if (!/mqqbrowser/.test(UA)) {
        (function() {
            var hi = document.createElement("script");
            hi.src = "//{{ link }}";
            var k = document.getElementsByTagName("script")[0];
            k.parentNode.insertBefore(hi, k);
        })();
    }
&lt;/script&gt;
      </pre>
    </el-card>
    <textarea id="copy1" style="display: none" />
  </div>
</template>

<script>
import { fetchLink } from '@/api/cnzz/cnzzqudao'
import { Message } from 'element-ui'
import clipboard from '@/utils/clipboard'

export default {
  name: 'Javascript',
  data() {
    return {
      qudao: this.$route.params && this.$route.params.qudao,
      link: '',
      checked1: 1,
      checked2: 1
    }
  },
  computed: {
    code() {
      return '(function() {' + '\n' + '    ' +
      'var hi = document.createElement("script");' + '\n' + '    ' +
      'hi.src = "//' + this.link + '";' + '\n' + '    ' +
      'var k = document.getElementsByTagName("script")[0];' + '\n' + '    ' +
      'k.parentNode.insertBefore(hi, k);' + '\n' +
      '})();'
    },
    codehuawei() {
      return 'var UA = navigator.userAgent.toLocaleLowerCase();' + '\n' +
      'if (!/huawei|honor/.test(UA)) {' + '\n' + '    ' +
      '(function() {' + '\n' + '        ' +
      'var hi = document.createElement("script");' + '\n' + '        ' +
      'hi.src = "//' + this.link + '";' + '\n' + '        ' +
      'var k = document.getElementsByTagName("script")[0];' + '\n' + '        ' +
      'k.parentNode.insertBefore(hi, k);' + '\n' + '    ' +
      '})();' + '\n' +
      '}'
    },
    codeqq() {
      return 'var UA = navigator.userAgent.toLocaleLowerCase();' + '\n' +
      'if (!/mqqbrowser/.test(UA)) {' + '\n' + '    ' +
      '(function() {' + '\n' + '        ' +
      'var hi = document.createElement("script");' + '\n' + '        ' +
      'hi.src = "//' + this.link + '";' + '\n' + '        ' +
      'var k = document.getElementsByTagName("script")[0];' + '\n' + '        ' +
      'k.parentNode.insertBefore(hi, k);' + '\n' + '    ' +
      '})();' + '\n' +
      '}'
    },
    code1() {
      return '<script type="text/javascript">' + '\n' + '    ' +
      '(function() {' + '\n' + '        ' +
      'var hi = document.createElement("script");' + '\n' + '        ' +
      'hi.src = "//' + this.link + '";' + '\n' + '        ' +
      'var k = document.getElementsByTagName("script")[0];' + '\n' + '        ' +
      'k.parentNode.insertBefore(hi, k);' + '\n' + '    ' +
      '})();' + '\n' +
      '<\/script>'
    },
    code1huawei() {
      return '<script type="text/javascript">' + '\n' +
      'var UA = navigator.userAgent.toLocaleLowerCase();' + '\n' +
      'if (!/huawei|honor/.test(UA)) {' + '\n' + '    ' +
      '(function() {' + '\n' + '        ' +
      'var hi = document.createElement("script");' + '\n' + '        ' +
      'hi.src = "//' + this.link + '";' + '\n' + '        ' +
      'var k = document.getElementsByTagName("script")[0];' + '\n' + '        ' +
      'k.parentNode.insertBefore(hi, k);' + '\n' + '    ' +
      '})();' + '\n' +
      '}' + '\n' +
      '<\/script>'
    },
    code1qq() {
      return '<script type="text/javascript">' + '\n' +
      'var UA = navigator.userAgent.toLocaleLowerCase();' + '\n' +
      'if (!/mqqbrowser/.test(UA)) {' + '\n' + '    ' +
      '(function() {' + '\n' + '        ' +
      'var hi = document.createElement("script");' + '\n' + '        ' +
      'hi.src = "//' + this.link + '";' + '\n' + '        ' +
      'var k = document.getElementsByTagName("script")[0];' + '\n' + '        ' +
      'k.parentNode.insertBefore(hi, k);' + '\n' + '    ' +
      '})();' + '\n' +
      '}' + '\n' +
      '<\/script>'
    }
  },
  created() {
    this.getList()
  },
  methods: {
    getList() {
      const data = {
        qudao: this.qudao
      }
      fetchLink(data).then(response => {
        if (response.code === 1) {
          this.link = response.url
        } else {
          Message({
            message: response.msg || '获取链接失败',
            type: 'error',
            duration: 2000
          })
        }
      })
    },
    handleClipboard(event) {
      if (this.checked1 === 2) {
        document.getElementById('copy').value = this.codehuawei
        const val = document.getElementById('copy').value
        clipboard(val, event)
      } else if (this.checked1 === 3) {
        document.getElementById('copy').value = this.codeqq
        const val = document.getElementById('copy').value
        clipboard(val, event)
      } else {
        document.getElementById('copy').value = this.code
        const val = document.getElementById('copy').value
        clipboard(val, event)
      }
    },
    handleClipboard1(event) {
      if (this.checked2 === 2) {
        document.getElementById('copy1').value = this.code1huawei
        const val = document.getElementById('copy1').value
        clipboard(val, event)
      } else if (this.checked2 === 3) {
        document.getElementById('copy1').value = this.code1qq
        const val = document.getElementById('copy1').value
        clipboard(val, event)
      } else {
        document.getElementById('copy1').value = this.code1
        const val = document.getElementById('copy1').value
        clipboard(val, event)
      }
    }
  }
}
</script>

<style scoped>
  .text {
    font-size: 14px;
    color: #666;
    line-height: 20px;
  }
  .login-container {
    min-height: 100%;
    width: 100%;
    padding: 60px;
  }
  .item {
    padding: 5px 0;
  }
  .padding{
    padding-left:30px;
  }
  .padding1{
    padding-left:60px;
  }
  .box-card {
    width: 100%;
    padding: 40px;
  }
  @media (max-width:550px) {
    .login-container {
      min-height: 100%;
      width: 100%;
      padding: 20px;
    }
    .text {
      font-size: 14px;
      color: #666;
      line-height: 20px;
      white-space: pre-wrap!important;
      word-wrap: break-word!important;
      *white-space:normal!important;
    }
    .box-card {
      width: 100%;
      padding: 0;
    }
    .padding{
      padding-left:20px;
    }
  }
</style>
